<template>
  <div>
    <Card>
      <P slot="title">基本信息</P>
      <i-form ref="form-inline" inline :rules="ruleInline" :model="formInline" :label-width="175">
        <Row>
          <i-col span='12'>
            <Form-item prop="bankname" size="large" label="银行名称">
              <i-input type="text" v-model="formInline.bankname" placeholder="输入银行名称">
              </i-input>
            </Form-item>
          </i-col>
        </Row>
        <Row>
          <i-col span='12'>
            <Form-item prop="cardnumber" size="large" label="银行卡号">
              <i-input type="text" v-model="formInline.cardnumber" placeholder="输入银行卡">

              </i-input>
            </Form-item>
          </i-col>
          <i-col span='11' offset="1">
            <Form-item prop="username" size="large" label="开户名">
              <i-input type="text" v-model="formInline.username" placeholder="输入开户名">
              </i-input>
            </Form-item>
          </i-col>
        </Row>
        <Row>
          <i-col span='12'>
            <Form-item prop="setmoney" size="large" label="设置金额">
              <i-input type="text" v-model="formInline.setmoney" placeholder="0">
              </i-input>
            </Form-item>
          </i-col>
        </Row>

        <div style="margin-left: -130px;">
          <Form-item size="large">
            <Button @click="handleSubmit()" size="large" class="com-btm">
              保存
            </Button>
            <Button size="large" @click="toback()" class="com-btm">
              返回
            </Button>
          </Form-item>
        </div>
      </i-form>
    </Card>
  </div>
</template>

<script>
  export default {
    name: 'edit_news_page',
    data() {
      return {
        formInline: {
          bankname: '',
          cardnumber: '',
          username: '',
          setmoney: ''
        },
        ruleInline: {
          bankname: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }],
          cardnumber: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }, ],
          username: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }, ],
          setmoney: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }, ]

        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs['form-inline'].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!');
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      // 返回
      toback(){
        this.$router.push({
          name: 'cash_manage_page'
        })
      }
    }
  }
</script>

<style>
  button {
    margin-left: 10px;
  }

/*  .ivu-form .ivu-form-item-label {
    text-align: center;
    background-color: #FBFBFB;
    border: 1px solid #ddd;
  } */

  .ivu-form-inline .ivu-form-item {
    width: 100%;
  }

  .ivu-input {
    border-radius: 0;
    height: 34px;
  }
</style>
